<template>
	<div class="container-box"> 
		<ul class="list-items">
			<li v-for="(item,index) in listdatas" :key="item.list_id">
				<span>{{item.list_text}}</span>
			</li>
		</ul>
		<button>上一页</button>
		<button v-for="index in Math.round(totalPages/10)" class="page-button" @click="getListPages(index)">{{index}}</button>
		<button>下一页</button>
		<p>共{{Math.round(totalPages/10)}}页/{{totalPages}}条数据</p>
	</div>
</template>

<script>
export default {
  name: 'listdata',
  data () {
    return {
    	listdatas: [],
    	totalPages: 0, 
    	pageSize: 10
    }
  },
  methods:{
    getListDatas: function(){
      this.$axios.get('/api/user/getListDatas')
      .then((res) => {
        this.listdatas = res.data
        this.totalPages = res.data.length;
      })
      .catch((err) => {
        console.log(err)
      })
    },
    getListPages: function(index){
    	var currentPage = index;
      	var pageSize = this.pageSize;
    	this.$axios.get('/api/user/getListPages',{
    		params:{
    			currentPage:currentPage,
	      		pageSize:pageSize
    		}
    	})
        .then((res) => {
          this.listdatas = res.data
        })
        .catch((err) => {
          console.log(err)
        })
    }
  },
  mounted(){
    this.getListDatas()
  }
}
</script>

<style scoped>
	.container-box{
		width: 50%;
		margin: 100px auto;
	}
	.container-box>p{
		background-color: #eee;
		padding: 5px;
		border-radius: 3px;
		box-shadow: 0 0 3px gray;
	}
	.list-items{
		width: 100%;
		height: 200px;
		overflow-y: auto;
		border: 1px solid #ddd;
		border-radius: 5px;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	/*修改滚动条默认样式*/
	.list-items::-webkit-scrollbar { 
		width:7px; 
		height:7px;
	}
	.list-items::-webkit-scrollbar-track-piece { 
		background:#ddd;
	}
	.list-items::-webkit-scrollbar-thumb { 
		background:#20A0FF; 
		border-radius:4px;
	}
	.list-items li{
		padding: 10px;
		text-align: left;
	}
	.list-items li:nth-child(odd){
		background-color: #eee;
	}
	.container-box>button{
		border:1px solid #20A0FF;
	    background-color: #20A0FF;
	    padding: 5px 15px;
	    border-radius: 5px;
	    color: #fff;
	    margin: 20px 5px;
	    outline: none;
	    cursor: pointer;
	}
	.container-box>.page-button{ 
		background-color: #ddd;
		border-color: #ddd;
		color: #fff;
		font-size: 15px;
	}
	.container-box>.page-button:hover{
		background-color: #999;
	}
</style>
